<route lang="json5">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '信息',
  },
}
</route>

<template>
  <view>
    <z-paging 
      ref="pagingRefs" 
      v-model="dataList" 
      :default-page-size="10"
      :safe-area-inset-bottom="true"
      :auto="false"
      :refresher-complete-delay="500"
      @query="queryList"
    >
      <template #top>
        <!-- 导航 -->
        <!--  #ifdef MP-WEIXIN -->
        <wd-navbar 
          placeholder 
          safeAreaInsetTop 
          title="聊天" 
        ></wd-navbar>
        <!--  #endif -->
          
        <!-- 走马灯 -->
        <view class="w-750rpx m-a" v-if="isShowTips">
          <wd-notice-bar 
            text="在了解对方之前，不要透露过多个人信息，包括地址、电话号码等敏感信息。任何要求提供验证码或借钱的行为都可能是骗局，务必保持警惕‌"
            :color="themeConfig.theme === 'dark' ? '#fff': '#1B1116'"
            background-color="rgba(255, 255, 255, 0)"
          >
            <template #prefix>
              <view class="w-32rpx h-32rpx font-size-0 pr-16rpx">
                <wd-img 
                  width="100%" 
                  height="100%" 
                  :src="tips" 
                  mode="aspectFill" 
                />
              </view>
            </template>
          </wd-notice-bar>
        </view>
      </template>

      <template #bottom>
        <view class="w-full h-50px"></view>
      </template>

      <view>
        <!-- 加载中 -->
        <view class="flex-center py-50rpx" v-if="!isFirst && loading">
          <wd-loading size="32rpx" color="#9C6DEF" />
        </view>
        
        <view v-if="isFirst">
          <!-- 骨架屏 - 加载中 -->
          <view class="w-750rpx m-a bg-#fff"
            :class="[{ 'dark-color': themeConfig.theme === 'dark' }]"
            v-for="item in 3"
            :key="item"
          >
            <view class="w-center flex pt-24rpx pb-24rpx">
              <wd-skeleton animation="gradient" :row-col="[{ size: '144rpx', type: 'circle' }]" />
              <wd-skeleton 
                animation="gradient" 
                :custom-style="{ width: '100%', marginLeft: '12px' }" 
                :row-col="[{ width: '30%' }, { width: '50%' }]" 
              />
            </view>
            <view class="border-1px"></view>
          </view>
        </view>
        
        <chat-item
          v-for="item in dataList"
          :key="item.id"
          :data="item"
        />
      </view>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import ChatItem from "@/components/list-item/chat-item.vue";
import { useThemeStore, useUserStore } from '@/store';
import { GetLocalImChatList, GetRecentContacts } from "@/service/db_user";
import { tips } from "@/static/base64";
import { share } from "@/enum";

// 主题颜色
const { themeConfig } = useThemeStore();
const user = useUserStore();

const dataList = ref([]);
const pagingRefs = ref();
const isFirst = ref(true);
const loading = ref(false);
const queryList = async (pageNo, pageSize) => {
  try {
    loading.value = true;
    const res = await GetLocalImChatList({
      limit: pageSize,
      userId: user.userInfo.id,
      // page: pageNo,
    });
    isFirst.value = false;
    loading.value = false;
    const list = res.data || [];
    pagingRefs.value.complete(list);
  } catch (error) {
    loading.value = false;
    pagingRefs.value.complete(false);
    isFirst.value = false;
  }
}
// const queryList = async (pageNo, pageSize) => {
//   try {
//     loading.value = true;
//     const { data } = await GetRecentContacts({
//       pageSize,
//       From_Account: user.userInfo.id,
//       TimeStamp: 0,
//       StartIndex: (pageNo - 1),
//       TopTimeStamp: 0,
//       TopStartIndex: 0,
//       AssistFlags: 15
//     });
//     isFirst.value = false;
//     loading.value = false;
//     const list = data.chatList || [];
//     pagingRefs.value.complete(list);
//   } catch (error) {
//     loading.value = false;
//     pagingRefs.value.complete(false);
//     isFirst.value = false;
//   }
// }

const isShowTips = ref(false);
onShow(() => {
  isShowTips.value = true;
  nextTick(() => {
    pagingRefs.value.reload();
  })
}) 

onHide(() => {
  isShowTips.value = false;
})

onShareAppMessage(() => {
  const id = user.userInfo.id || '';
  return {
    title: '我满心期待，与你相遇的未来！',
    path: `/pages/tabbar/index?instrId=${id}`,
    imageUrl: share
  }
})
</script>

<style lang="scss" scoped>
:deep(.wd-notice-bar) {
  padding-right: 0 !important;
}
</style>
    